<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{/js/jquery-3.3.1.js}"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        nav a {
            color: white;
        }
        nav a:hover {
            color: red;
        }
        table tr {
            width: 80%;
            border-radius: 10px;
        }
        table td {
            width: 20%;
        }
        li {
            list-style: none;
            margin-top: 20px;
        }
        div {
            border-radius: 10px;
        }
    </style>
</head>
<body>
<form th:action="@{/user/to_pay}">
<nav style="background-color: #20c997;height: 40px;text-align: center;color: white">
    <div style="float: left;margin-left: 20px">
        <img th:src="@{/img/nav.png}" alt="">
    </div>
    <span style="line-height: 40px;font-size: 26px;">支付</span>
    <div style="float: right;margin-right: 20px;line-height: 40px;">
        <img th:src="@{/img/nav2.png}" alt="" height="20" style="margin-left: 20px;">
        <a href="#">购物车</a>
        <img th:src="@{/img/nav3.png}" alt="" height="20" style="margin-left: 20px;">
        <a href="#">个人中心</a>
    </div>
</nav>
<!---->
<div style="margin-top: 10px;">
    <span style="background-color:#20c997;border-radius: 50%;color: white;padding: 2px;margin-left: 5px;">￥</span>
    <span>收银</span>
    <hr color="#20c997"style="padding: 1px; margin-top: 5px;">
</div>
<!--主要部分-->
<div style="margin-left: 10px;">
    <div>
        <p>订单提交成功,请你尽快支付!订单编号: 0000000</p>
        <p>请你在24小时之内完成支付,否则订单自动取消</p>
    </div>
    <p style="margin: 20px 0;">订单详情</p>
    <div style="width: 90%;background-color:#f2f2f2;text-align: center;">
        <ul>
            <li>
                <table cellspacing="0" cellpadding="0" style="width: 80%;margin: auto">
                    <tr>
                        <td></td>
                        <td>药材名称</td>
                        <td>购买数量</td>
                        <td>药材单价</td>
                        <td>合计</td>
                    </tr>
                </table>
            </li>
            <li th:each="medicine:${medicines}">
                <table cellspacing="0" cellpadding="0" style="width: 80%;margin: auto;background-color:white;">
                    <tr>
                        <td><img th:src="@{/img/timg12.jpg}" alt="" width="100"></td>
                        <td style="display: none"><input name="checkItem" type="checkbox"  th:value="${medicine.getId()}" checked /></td>
                        <td th:text="${medicine.getName()}"></td>
                        <td th:text="${medicine.getAmount()}">2</td>
                        <td th:text="${medicine.getPrice()}">500</td>
                        <td class="single" th:text="${#numbers.formatDecimal(medicine.getPrice()*medicine.getAmount(),1,'COMMA',2,'POINT')}"></td>
                    </tr>
                </table>
            </li>
        </ul>
        <hr style="width: 80%;margin: auto;">
        <div style="height: 100px;width: 80%;margin: 5px auto;">
            <button type="button" id="used" style="float: left;border-radius: 10px;border: 1px solid red;color: red;padding: 2px;">选择优惠券</button>
            <div style="float: right">
                <div>
                    <span>商品总价</span>
                    <strong>￥</strong>
                    <span id="all"></span>
                </div>
                <div>
                    <span>优惠金额</span>
                    <strong style="color: red;">-￥</strong>
                    <span id="discount" th:text="${money}" style="display: none"></span>
                </div>
                <div>
                    <span>需付款</span>
                    <strong style="color: red;">￥</strong>
                    <span id="shouldPay" style="color: red;"></span>
                    <input id="should" name="payAll" type="text" style="display: none">
                </div>
            </div>
        </div>

    </div>

</div>
<!--底部-->
<div style="width: 90%;border: 1px solid black;height: 100px;margin: 5px;position: relative">
    <div style="float: left;margin: 10px;">
        <span>应付金额</span>
        <span id="m2"  style="color: red;"></span>
    </div>
    <div style="float: right;margin: 10px;">
        <div>
            <span>收货人:</span>
            <span th:text="${user.getUsername()}"></span>
        </div>
        <div>
            <span>联系电话:</span>
            <span th:text="${user.getTel()}"></span>
        </div>
        <div>
            <span>收货地址:</span>
            <span th:text="${user.getAddress()}"></span>
        </div>
    </div>
    <input type="submit" style="width: 200px;padding:4px;border-radius: 5px;background-color:#df4040;position: absolute;bottom: 5px;left: 50%;text-align: center;margin-left: -100px;color: white;" value="立即支付" />
</div>
</form>
<script>
    $(function () {
        var i=0;
        $(".single").each(function () {
            i+=Number(this.innerHTML);
        });
        $("#all").text(i);
        $("#should").val(i)
        $("#shouldPay").text(i);
        $("#m2").text(i);

        $("#used").click(function () {
            $("#discount").css("color","red");
            $("#discount").css("display","inline-block");
            $("#shouldPay").text(i-Number($("#discount")[0].innerHTML));
            $("#m2").text(i-Number($("#discount")[0].innerHTML));
        });

    });
</script>
</body>
</html>